<template>
  <div class="muRevealList">
    <div class="mu-reveal-header">
      <div class="mu-reveal-title">
        {{params.title}}
      </div>
      <div class="mu-reveal-en">
        {{params.eTitle}}
      </div>
    </div>
    <div class="mu-reveal-info">
      <div class="mu-reveal-list" v-for="item in params.items">
        <img :src="alias.src ? item[alias.src] : item.src">
        <div class="mu-reveal-layout">
          <div class="layout-info">
            <div>{{alias.title ? item[alias.title] : item.title}}</div>
            <div>{{alias.eTitle ? item[alias.eTitle] : item.eTitle}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less">
  .muRevealList {
    .mu-reveal-header {
      margin-top: 60px;
      .mu-reveal-title {
        width: 150px;
        line-height: 50px;
        text-align: center;
        margin: 0 auto;
        border-top: 1px solid #6f6f6f;
        border-bottom: 1px solid #6f6f6f;
      }
      .mu-reveal-en {
        text-align: center;
        line-height: 30px;
        font-size: 8px;
      }
    }
    .mu-reveal-info {
      cursor: pointer;
      max-width: 900px;
      margin: 0 auto;
      padding-bottom: 40px;
      .mu-reveal-list {
        display: inline-block;
        position: relative;
        width: ~'calc(50% - 10px)';
        margin: 40px 5px;
        img {
          width: 100%;
        }
        .mu-reveal-layout {
          position: absolute;
          display: none;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          background: rgba(0, 0, 0, 0.5);
          color: white;
          .layout-info {
            text-align: center;
            position: relative;
            top: 45%;
          }
        }
      }
      .mu-reveal-list:nth-child(2n) {
        top: 40px;
      }
      .mu-reveal-list:hover {
        .mu-reveal-layout {
          display: block;
        }
      }
    }
  }

  @media screen and (max-width: 900px) {
    .muRevealList {
      .mu-reveal-header {
        margin-top: 30px;
      }
      .mu-reveal-info {
        padding: 0 !important;
      }
      .mu-reveal-list {
        width: ~'calc(100%)' !important;
        margin: 0 !important;
      }
      .mu-reveal-list:nth-child(2n) {
        top: 0 !important;
      }
    }
  }

</style>

<script>
  export default {
    name: 'reveal-list',
    props: {
      params: {
        type: Object,
        default: () => {
          return {}
        }
      },
      alias: {
        type: Object,
        default: function () {
          return {}
        }
      }
    }
  }

</script>
